<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* > 子代选择器，后面所有的这个元素都会被选中 */
        .box>li{
            border: 1px solid red;
        }
        /* + 当前元素的后面第一个兄弟元素 */
        /* .child+li{
            background: yellowgreen;
        } */
        /* ~ 当前元素的后面所有的亲兄弟 */
        .child~li{
            background: yellowgreen;
        }
        /* .container+p{
            background: green;
        } */
        .container~p{
            background: green;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>111
            <ul>
                <li>111-111</li>
                <li>111-222</li>
                <li>111-333</li>
            </ul>
        </li>
        <li class="child">222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

    <div class="container">111</div>
    <p>p-111</p>
    <p>p-222</p>
    <div>
        <p>p-333</p>
    </div>
</body>
</html>